import AuthComponent from "@/components/AuthComponent";
import { lazy, ReactNode, Suspense } from "react";
import { RouteObject } from "react-router-dom";
const Home = lazy(() => import("@/pages/Home"));
const Login = lazy(() => import("@/pages/Login"));
const Register = lazy(() => import("@/pages/Register"));

/**
 * 组件懒加载
 * @param { ReactNode } component
 * @returns ReactNode
 */
// 最外层的不需要懒加载，否则会出现短暂白屏的现象！！！
const lazyLoad = (component: ReactNode): ReactNode => {
  return <Suspense fallback={"正在加载中...."}>{component}</Suspense>;
};
const routers: RouteObject[] = [
  {
    path: "/",
    element: lazyLoad(
      <AuthComponent>
        <Home />
      </AuthComponent>
    ),
  },
  {
    path: "/home",
    element: lazyLoad(
      <AuthComponent>
        <Home />
      </AuthComponent>
    ),
  },
  {
    path: "/login",
    element: lazyLoad(<Login />),
  },
  {
    path: "/register",
    element: lazyLoad(
      <AuthComponent>
        <Register />
      </AuthComponent>
    ),
  },
];
export default routers;
